<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>员工满意度管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		var jsonData = ${jsonData};
		var nameList = ${nameJsonData};
		global.loginPassword = "${fns:getLoginPw()}";
		$(document).ready(function() {
			$("#contentTable tbody tr").click(function(){
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
				showDetail(this.id);
			});
			$("#contentTable tbody tr:first-child").addClass("select_active");
			$("#searchForm").validate({
				submitHandler: function(form){
					var startValue = $("#startDate").val();
					if (!startValue){
						showTip("开始日期必须填写!");
						return;
					}
					var endValue = $("#endDate").val();
					if (!endValue){
						showTip("结束日期必须填写!");
						return;
					}
					if(startValue && endValue){
						 var start = new Date(startValue.replace(/-/g, "/"));
						 var end = new Date(endValue.replace(/-/g, "/"));
						 if (end < start) {
							showTip("结束日期不能大于开始日期!");
							return;
						}
					}
					var submit = function(){
						form.submit();
		            }
					loginPasswordPopup(submit);
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		function showDetail(index){
			var obj = jsonData[index].newCard;
			$("#currentEmployee").html(nameList[index]);
			$("#content tbody").html("");
			var html = "<tr><td>新开卡</td><td>"+obj[1]+"</td><td>"+obj[2]+"</td><td>"+obj[3]+"</td><td>"+obj[4]+"</td><td>"+obj[5]+"</td></tr>" ;
			obj = jsonData[index].productCard;
			html += "<tr><td>产品销售</td><td>"+obj[1]+"</td><td>"+obj[2]+"</td><td>"+obj[3]+"</td><td>"+obj[4]+"</td><td>"+obj[5]+"</td></tr>"
			obj = jsonData[index].careCard;
			html += "<tr><td>手工护理</td><td>"+obj[1]+"</td><td>"+obj[2]+"</td><td>"+obj[3]+"</td><td>"+obj[4]+"</td><td>"+obj[5]+"</td></tr>"
			obj = jsonData[index].rechargeCard;
			html += "<tr><td>卡充值</td><td>"+obj[1]+"</td><td>"+obj[2]+"</td><td>"+obj[3]+"</td><td>"+obj[4]+"</td><td>"+obj[5]+"</td></tr>"
			$("#content tbody").append(html);
			$('#popupDialog').popup('open');
		}
	</script>
</head>
<body>
	<div class="icon-buttons">
		<a data-role="button" data-inline="true" data-icon="back" data-iconpos="notext"  href="${ctx}">返回</a>
	</div>
<div id="page1">
	<form:form id="searchForm" modelAttribute="storeEmployeeAccounting" action="${ctx}/employee/storeEmployeeAccounting/satisfaction" method="post">
		<label>开始日期：</label>
		<input type="date" id="startDate" data-inline="true" name="startDate" value="${startDate}"/>
		<label>结束日期：</label>
		<input type="date" id="endDate" data-inline="true" name="endDate" value="${endDate}"/>
		<input id="btnSubmit" type="submit" value="客户满意度查询" data-inline="true"/>
	</form:form>
	<tags:message content="${message}"/>
	<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
		<thead><tr><th>员工</th><th>非常满意</th><th>较满意</th><th>一般</th><th>不太满意</th><th>非常不满意</th></tr>
		</thead>
		<tbody>
		<c:forEach items="${list}" var="map" varStatus="status">
			<tr id="${status.index}">
				<td>${nameList[status.index]}</td>
				<td>${map['1']}</td>
				<td>${map['2']}</td>
				<td>${map['3']}</td>
				<td>${map['4']}</td>
				<td>${map['5']}</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
</div>
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>详细信息</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
    	<h3 class="ui-title">当前员工：<font id="currentEmployee"></font></h3>
        <table id="content" data-role="table" class="ui-responsive table-stroke">
			<thead><tr><th>类别</th><th>非常满意</th><th>较满意</th><th>一般</th><th>不太满意</th><th>非常不满意</th></tr>
			</thead>
			<tbody>
			</tbody>
		</table>
        <a href="#" data-role="button" data-rel="back" data-theme="c">关闭</a>
    </div>
</div>
</body>
</html>
